<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{title}}
      <div class="my-define-dialog-title-btn">
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-scrollbar :style="customeStyle" class="my-form-scrollbar">
      <div class="sort-menu-content">
        <el-tree ref="sortMenuTree" :props="treeProps" :data="treeList" node-key="id" :expand-on-click-node="false"
          highlight-current :allow-drop="allowDrop" :allow-drag="allowDrag" @node-drop="handleDrop" draggable>
          <div style="" class="custom-tree-node" slot-scope="{ node, data }">
            <el-tooltip :open-delay="500" class="item" effect="light" content="长按鼠标拖动排序" placement="top-start">
              <div>
                {{data.label}}
              </div>
            </el-tooltip>
          </div>
        </el-tree>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    sortMenu
  } from '@/api/system/menu'
  import defaultSettings from '@/settings'
  export default {
    name: 'menu-sort',
    props: {
      Id: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: ''
      },
      data: {
        type: Object,
        default: () => ({})
      },
      dataList: {
        type: Array,
        default: () => ([])
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px',
          background: "#fff",
        },
        treeProps: {
          children: 'children',
          label: 'label'
        },
        treeList: []
      }
    },
    created() {
      this.dataList.forEach((item) => {
        this.treeList.push({
          id: item.Id,
          label: item.label
        })
      })
    },
    methods: {
      allowDrop(draggingNode, dropNode, type) {
        if (type == 'inner') {
          return false
        }
        return true
      },
      allowDrag(draggingNode) {
        return true
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {},
      submitForm() {
        var that = this;
        var Ids = []
        this.treeList.forEach((item) => {
          Ids.push(item.id)
        })
        sortMenu({
          Ids: JSON.stringify(Ids)
        }).then(res => {
          if (res.status) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.cancel(true);
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doCloseMenu", reload)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .sort-menu-content {
    padding: 20px;
  }
</style>
